<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板一</title>
    <link type="text/css" rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css"/>
    <link type="text/css" rel="stylesheet" href="../css/public.css"/>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]-->
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>

<div class="layuimini-container">

    <script type="text/html" id="layui-bnt-group">
        <div class="layui-input-inline">
            <label class="layui-form-label layui-bg-gray" style="width: 100px;text-align: center">查询数据</label>
            <input type="text" class="layui-input layui-input-inline" placeholder="demo" style="width: 200px">
        </div>

        <div class="layui-input-inline">
            <label class="layui-form-label layui-bg-gray" style="width: 100px;text-align: center">查询数据</label>
            <input type="text" class="layui-input layui-input-inline" placeholder="demo" style="width: 200px">
        </div>

        <div class="layui-input-inline">
            <label class="layui-form-label layui-bg-gray" style="width: 100px;text-align: center">查询数据</label>
            <input type="text" class="layui-input layui-input-inline" placeholder="demo" style="width: 200px">
        </div>

        <div class="layui-input-inline">
            <label class="layui-form-label layui-bg-gray" style="width: 100px;text-align: center">查询数据</label>
            <input type="text" class="layui-input layui-input-inline" placeholder="demo" style="width: 200px">
        </div>

        <button type="button" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i>查询</button>


        <!--        <div class="layui-btn-group" >-->
        <!--            <button type="button" class="layui-btn"><i class="layui-icon"></i>增加</button>-->
        <!--            <button type="button" class="layui-btn"><i class="layui-icon "></i>编辑</button>-->
        <!--            <button type="button" class="layui-btn layui-btn-primary" style="color: #ff0000"><i class="layui-icon"></i>删除</button>-->
        <!--        </div>-->
    </script>


    <div class="layuimini-main">
        <table class="layui-table" id="demo" lay-filter="demoFilter"></table>
    </div>


    <script type="text/html" id="layui-table-edit-tool">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                class="layui-icon "></i>编辑
        </button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete"
                style="color: #ff0000"><i class="layui-icon"></i>删除
        </button>
    </script>


    <div id="edits" style="display: none; height: 100%; height: 100%;">
        <div class="layuimini-main">

            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">长输入框</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">短输入框</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期选择</label>
                        <div class="layui-input-block">
                            <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">行内表单</label>
                        <div class="layui-input-inline">
                            <input type="text" name="number" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" placeholder="请输入密码" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">范围</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">单行选择框</label>
                    <div class="layui-input-block">
                        <select name="interest" lay-filter="aihao">
                            <option value=""></option>
                            <option value="0">写作</option>
                            <option value="1" selected="">阅读</option>
                            <option value="2">游戏</option>
                            <option value="3">音乐</option>
                            <option value="4">旅行</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">行内选择框</label>
                    <div class="layui-input-inline">
                        <select name="quiz1">
                            <option value="">请选择省</option>
                            <option value="浙江" selected="">浙江省</option>
                            <option value="你的工号">江西省</option>
                            <option value="你最喜欢的老师">福建省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="quiz2">
                            <option value="">请选择市</option>
                            <option value="杭州">杭州</option>
                            <option value="宁波" disabled="">宁波</option>
                            <option value="温州">温州</option>
                            <option value="温州">台州</option>
                            <option value="温州">绍兴</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="quiz3">
                            <option value="">请选择县/区</option>
                            <option value="西湖区">西湖区</option>
                            <option value="余杭区">余杭区</option>
                            <option value="拱墅区">临安市</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">开关-开</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest"
                               title="开关">
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">单选框</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="男" title="男" checked="">
                        <input type="radio" name="sex" value="女" title="女">
                        <input type="radio" name="sex" value="禁" title="禁用" disabled="">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">文本域</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo2">跳转式提交</button>
                </div>
            </form>

        </div>
    </div>
    <script type="text/javascript" rel="script" src="../lib/layui-v2.5.5/layui.js"></script>
    <script type="text/javascript" rel="script">

        layui.use(['table', 'layer'], function () {
            var table = layui.table,
                layer = layui.layer,
                $ = layui.$;

            table.render({
                elem: '#demo',
                url: '../api/table.json',
                height: 'full-70',
                toolbar: '#layui-bnt-group',
                cols: [[
                    {type: "checkbox", width: 50},
                    {field: 'id', width: 80, title: 'ID', sort: true},
                    {field: 'username', width: 80, title: '用户名'},
                    {field: 'sex', width: 80, title: '性别', sort: true},
                    {field: 'city', width: 80, title: '城市'},
                    {field: 'sign', title: '签名', minWidth: 150},
                    {field: 'experience', width: 80, title: '积分', sort: true},
                    {field: 'score', width: 80, title: '评分', sort: true},
                    {field: 'classify', width: 80, title: '职业'},
                    {field: 'wealth', width: 135, title: '财富', sort: true},
                    {title: '操作', fixed: 'right', minWidth: 150, toolbar: '#layui-table-edit-tool', align: "center"}
                ]],
                page: true
            });

            //给表格编辑，删除按钮添加点击事件
            table.on('tool(demoFilter)', function (obj) {
                var data = obj.data;//得到删除行整行的数据
                if (obj.event === 'del') {

                    layer.confirm('真的删除行么', {icon: 2}, function (index) {
                        layer.close(index);
                        $.post("../deleteTaTransaction", {taTransactionId: data.taTransactionId + ""}, function (msg) {
                            table.reload('userTable');
                        });

                    });
                } else if (obj.event === 'edit') {
                    var index = layer.open({
                        type: 1,
                        title: '修改员工',
                        closeBtn: 1,
                        move: false,
                        area: ['1000px', '700px'],
                        content: $('#edits')
                    });
                }
                ;
            })
        })

    </script>

</body>
</html>